<template>
  <Layout>
    <div class="student-list">
      <div class="page-header">
        <h2>学生管理</h2>
        <button class="btn-primary" @click="showCreateDialog = true">
          添加学生
        </button>
      </div>

      <div class="search-box">
        <input 
          v-model="searchKeyword" 
          placeholder="搜索学生姓名或学号..."
          class="search-input"
        >
        <button class="btn-search" @click="loadStudents">搜索</button>
      </div>

      <div class="table-container">
        <table class="data-table">
          <thead>
            <tr>
              <th>学号</th>
              <th>姓名</th>
              <th>性别</th>
              <th>班级</th>
              <th>联系方式</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="student in students" :key="student.id">
              <td>{{ student.studentId }}</td>
              <td>{{ student.name }}</td>
              <td>{{ student.gender }}</td>
              <td>{{ student.className }}</td>
              <td>{{ student.phone }}</td>
              <td>
                <button class="btn-edit" @click="editStudent(student)">编辑</button>
                <button class="btn-delete" @click="deleteStudent(student.id)">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 分页控件 -->
      <div class="pagination">
        <button :disabled="currentPage === 1" @click="prevPage">上一页</button>
        <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
        <button :disabled="currentPage === totalPages" @click="nextPage">下一页</button>
      </div>
    </div>
  </Layout>
</template>

<script>
import { ref, onMounted } from 'vue';
import Layout from '@/components/Layout.vue';
import { studentApi } from '@/api/student';

export default {
  name: 'StudentListView',
  components: {
    Layout
  },
  setup() {
    const students = ref([]);
    const searchKeyword = ref('');
    const currentPage = ref(1);
    const pageSize = ref(10);
    const totalPages = ref(1);

    const loadStudents = async () => {
      const response = await studentApi.getStudents({
  page: currentPage.value,
  size: pageSize.value,
  keyword: searchKeyword.value
});
students.value = response.data.data.records;
totalPages.value = response.data.data.pages;
    };

    const editStudent = (student) => {
      console.log('编辑学生:', student);
      // 这里实现编辑逻辑
    };

    const deleteStudent = async (id) => {
      if (confirm('确定要删除这个学生吗？')) {
        try {
          // 实际项目中调用删除API
          console.log('删除学生:', id);
          await loadStudents(); // 重新加载列表
        } catch (error) {
          console.error('删除学生失败:', error);
        }
      }
    };

    const prevPage = () => {
      if (currentPage.value > 1) {
        currentPage.value--;
        loadStudents();
      }
    };

    const nextPage = () => {
      if (currentPage.value < totalPages.value) {
        currentPage.value++;
        loadStudents();
      }
    };

    onMounted(() => {
      loadStudents();
    });

    return {
      students,
      searchKeyword,
      currentPage,
      pageSize,
      totalPages,
      loadStudents,
      editStudent,
      deleteStudent,
      prevPage,
      nextPage
    };
  }
};
</script>

<style scoped>
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-box {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.search-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.btn-primary, .btn-search {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-primary {
  background-color: #3498db;
  color: white;
}

.btn-search {
  background-color: #2ecc71;
  color: white;
}

.table-container {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.data-table th {
  background-color: #f8f9fa;
  font-weight: 600;
}

.btn-edit, .btn-delete {
  padding: 4px 8px;
  margin: 0 2px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.btn-edit {
  background-color: #f39c12;
  color: white;
}

.btn-delete {
  background-color: #e74c3c;
  color: white;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
}

.pagination button {
  padding: 6px 12px;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>